<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距合并问题</title>
		<style>
			/*父级元素设置：宽高，边框*/
			div.parent{
				width: 300px;
				height: 300px;
				border: 1px solid red;
				margin-bottom: 150px;
			}
			div.son{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				margin-top: 149px;
			}
			/*以上【外边距垂直合并】1.【外部】外边距垂直会合并，最大值为准
			建议：最小值的外边距删掉
			*/
		   div.parent{
			   width: 300px;
			   height: 300px;
			   /*填充*/
			   background-color: #a7a7a7;
			   /*上外边距：100px*/
			   margin-top: 100px;
			   /*推荐：找到父级元素加溢出隐藏，父级元素隐藏，余出空间，正常加外边距*/
			   overflow: auto;
			   /*建议：找到父级元素加边框，有空间*/
			   border: 1px solid transparent;
			   /*不推荐：内边距占空间，找到发生问题的位置*/
			   padding-top: 1px;
		   }
		   div.son{
			   width: 100px;
			   height: 100px;
			   background-color: #f00;
			   /*上外边距：40px*/
			   margin-top: 110px;
		   }
		   /*1.以上【外边距垂直合并】2.【内部】外边距垂直会合并，最大值为准
		                              解决方案：溢出隐藏，转换为块级上下文结构
									  找到父元素添加 overflow:hidden或者auto
									  加1个像素，透明边框，具体的位置内边距
									  找到父元素添加：border或者padding:1px
		   */
		</style>
	</head>
	<body>
		<div class="parent">
		<div class="son"></div>
		</div>
	</body>
</html>